<template>
  <el-date-picker
    v-model="timePickageValue"
    :value-format="valueFormat"
    type="daterange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    @change="handleTimeChange"
  >
  </el-date-picker>
</template>

<script>
export default {
  name: "TimeFrame",
  props: {
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd",
    },
    start: { type: String, default: "" },
    end: { type: String, default: "" },
  },
  data() {
    return {
      timePickageValue: "",
    };
  },
  methods: {
    handleTimeChange(val) {
      console.log(val);
      this.$emit("update:start", val[0]);
      this.$emit("update:end", val[1]);
    },
  },
  mounted() {
    if (this.start && this.end) {
      this.timePickageValue = [this.start, this.end];
    }
  },
};
</script>

<style lang="scss" scoped></style>
